<!-- eslint-disable vue/no-mutating-props -->
<template>
	<Col
		v-if="
			!item.hidden &&
				(!item.config.visibility ||
					(Array.isArray(item.config.visibility) && item.config.visibility.includes('pc')))
		"
		:span="item.config.span"
		:class="{
			'item-card': item.config.identity === 'card',
			'm-view-item-table': item.config.identity === 'table',
		}"
	>
		<template v-if="item.config.layout === 'colFormItem'">
			<template v-if="item.config.identity === 'divider'">
				<Divider :content-position="item.contentPosition">
					{{item.customSlot.default}}
				</Divider>
			</template>
			<template v-else-if="item.config.identity === 'text'">
				<FormItem
					label-width="0"
					:tip-label="item.config.label ? item.config.tipLabel : ''"
				>
					<McText
						v-model="item.config.defaultValue"
						:line-height="item.lineHeight"
						:font-size="item.fontSize"
						:text-style="item.textStyle"
					/>
				</FormItem>
			</template>
			<template v-else-if="item.config.identity === 'link'">
				<FormItem
					label-width="0"
					:tip-label="item.config.label ? item.config.tipLabel : ''"
				>
					<McLink
						:content="item.content"
						:href="item.href"
						:target="item.target"
						:text-style="item.textStyle"
					/>
				</FormItem>
			</template>
			<template v-else-if="item.config.identity === 'alert'">
				<FormItem
					label-width="0"
					:tip-label="item.config.label ? item.config.tipLabel : ''"
				>
					<Alert
						:title="item.title"
						:type="item.type"
						:closable="item.closable"
						:description="item.description"
						:show-icon="item.showIcon"
						style="word-break: break-all"
						:close-text="item.closeText"
					/>
				</FormItem>
			</template>
			<template v-else-if="item.config.identity === 'groupTitle'">
				<FormItem label-width="0">
					<McGroupTitle
						:content="item.content"
						:tip-label="item.tipLabel"
						:content-position="item.contentPosition"
					/>
				</FormItem>
			</template>
			<template v-else-if="item.config.identity === 'button'">
				<FormItem
					label-width="0"
					:tip-label="item.config.label ? item.config.tipLabel : ''"
				>
					<McButton
						:align="item.align"
						:button-text="item.buttonText"
						:type="item.type"
						:disabled="item.disabled"
					/>
				</FormItem>
			</template>
			<template v-else>
				<FormItem
					:prop="item.model"
					:label-width="item.config.labelWidth ? `${item.config.labelWidth}px` : null"
					:label="item.config.showLabel ? item.config.label : ''"
					:tip-label="item.config.label ? item.config.tipLabel : ''"
				>
					<template v-if="item.config.identity === 'uploadFz'">
						<McUploadFile
							v-model="item.config.defaultValue"
							detailed
							disabled
						/>
					</template>
					<template v-else-if="item.config.identity === 'uploadImg'">
						<CustomImage
							v-for="(cItem, ci) in item.config.defaultValue"
							:key="ci"
							:src="$pathConfig.comUrl + cItem.url"
							class="dy-img"
							:preview-src-list="getImgList(item.config.defaultValue)"
							:z-index="10000"
						/>
					</template>
					<template v-else-if="item.config.identity === 'colorPicker'">
						<ColorPicker
							v-model="item.config.defaultValue"
							:show-alpha="item.showAlpha"
							:color-format="item.colorFormat"
							:size="item.size"
							disabled
						/>
					</template>
					<template v-else-if="item.config.identity === 'rate'">
						<Rate
							v-model="item.config.defaultValue"
							:max="item.max"
							:allow-half="item.allowHalf"
							:show-text="item.showText"
							:show-score="item.showScore"
							disabled
						/>
					</template>
					<template v-else-if="item.config.identity === 'slider'">
						<div class="slider-box">
							<Slider
								v-model="item.config.defaultValue"
								:range="item.range"
								:show-stops="item.showStops"
							/>
							<div class="slider-mark"/>
						</div>
					</template>
					<template v-else-if="item.config.identity === 'editor'">
						<div v-html="item.config.defaultValue"/>
					</template>
					<template v-else-if="item.config.identity === 'relationForm'">
						<a
							style="color: #1890ff"
							@click="toDetail(item)"
						>{{item.name}}</a>
					</template>
					<template v-else-if="item.config.identity === 'popupSelect'">
						<p>{{item.name}}</p>
					</template>
					<template
						v-else-if="['relationFormAttr', 'popupAttr'].includes(item.config.identity)"
					>
						<p v-if="!item.model">
							{{relationData[item.relationField] &&
								relationData[item.relationField][item.showField]
								? relationData[item.relationField][item.showField]
								: ""}}
						</p>
						<p v-else>
							{{item.config.defaultValue}}
						</p>
					</template>
					<template v-else-if="item.config.identity === 'barcode'">
						<McBarcode
							:format="item.format"
							:line-color="item.lineColor"
							:background="item.background"
							:width="item.width"
							:height="item.height"
							:static-text="item.staticText"
							:data-type="item.dataType"
							:relation-field="item.relationField + '_id'"
							:form-data="formValue"
						/>
					</template>
					<template v-else-if="item.config.identity === 'qrcode'">
						<McQrcode
							:format="item.format"
							:color-light="item.colorLight"
							:color-dark="item.colorDark"
							:size="item.size"
							:static-text="item.staticText"
							:data-type="item.dataType"
							:relation-field="item.relationField + '_id'"
							:form-data="formValue"
						/>
					</template>
					<template
						v-else-if="
							item.config.identity === 'calculate' && item.config.isStorage === 1
						"
					>
						<McCalculate
							:expression="item.expression"
							:is-storage="1"
							:form-data="formValue"
							:is-amount-chinese="item.isAmountChinese"
							:thousands="item.thousands"
							:precision="item.precision"
							:detailed="true"
						/>
					</template>
					<template v-else-if="item.config.identity === 'numInput'">
						<McNumber
							v-model="item.config.defaultValue"
							:thousands="item.thousands"
							:is-amount-chinese="item.isAmountChinese"
							:addon-before="item.addonBefore"
							:addon-after="item.addonAfter"
							:precision="item.precision"
						/>
					</template>
					<template v-else>
						<div class="m-view-detail-text">
							<span v-if="item.customSlot && item.customSlot.prepend">{{item.customSlot.prepend}}</span>{{getValue(item)}}<span v-if="item.customSlot && item.customSlot.append">{{item.customSlot.append}}</span>
						</div>
						<div
							v-if="item.isAmountChinese"
							class="isAmountChinese m-view-detail-text"
						>
							<!-- {{amountChinese(item.config.defaultValue)}} -->
						</div>
					</template>
				</FormItem>
			</template>
		</template>
		<template v-else>
			<template v-if="item.config.identity === 'card'">
				<Card
					:shadow="item.shadow"
					:header="item.header"
					class="mb-20px"
				>
					<template #header>
						<span
							v-if="item.config.tipLabel && item.header"
							slot="label"
						>{{item.header}}
							<Tooltip
								placement="top"
								:content="item.config.tipLabel"
							>
								<a class="el-icon-question m-view-tooltip-question"/>
							</Tooltip>
						</span>
						<span v-else>{{item.header}}</span>
					</template>
					<Row>
						<Item
							v-for="(childItem, childIndex) in item.config.children"
							:key="childIndex"
							:item="childItem"
							v-bind="$props"
							v-on="$listeners"
						/>
					</Row>
				</Card>
			</template>
			<template v-if="item.config.identity === 'row'">
				<Row :gutter="formConf.gutter">
					<Item
						v-for="(childItem, childIndex) in item.config.children"
						:key="childIndex"
						:item="childItem"
						v-bind="$props"
						v-on="$listeners"
					/>
				</Row>
			</template>
			<template v-if="item.config.identity === 'table'">
				<FormItem
					v-if="!item.hidden"
					label-width="0"
				>
					<div
						v-if="item.config.showTitle"
						class="m-view-common-title"
					>
						<span
							v-if="item.config.tipLabel && item.config.label"
							slot="label"
						>{{item.config.label}}
							<Tooltip
								placement="top"
								:content="item.config.tipLabel"
							>
								<a class="el-icon-question m-view-tooltip-question"/>
							</Tooltip>
						</span>
						<h2 v-else>
							{{item.config.label}}
						</h2>
					</div>
					<Table
						:data="item.config.defaultValue"
						:show-summary="
							!!item.config.defaultValue.length &&
								item.showSummary &&
								item.summaryField &&
								!!item.summaryField.length
						"
						:summary-method="getSummaries"
					>
						<TableColumn
							prop="index"
							type="index"
							width="50"
							label="序号"
							align="center"
						/>
						<template v-for="(column, columnIndex) in item.config.children">
							<template
								v-if="
									!column.hidden &&
										(!column.config.visibility ||
											(Array.isArray(column.config.visibility) &&
												column.config.visibility.includes('pc')))
								"
							>
								<TableColumn
									v-if="column.config.identity === 'relationForm'"
									:key="columnIndex"
									:prop="column.model"
									:label="column.config.label"
								>
									<template #default="scope">
										<Link
											:underline="false"
											type="primary"
											@click.native="
												toTableDetail(
													column,
													scope.row[column.model + '_id'],
												)
											"
										>
											{{scope.row[column.model]}}
										</Link>
									</template>
								</TableColumn>
								<TableColumn
									v-else-if="
										['relationFormAttr', 'popupAttr'].includes(
											column.config.identity,
										)
									"
									:key="columnIndex"
									:label="column.config.label"
									:prop="column.model"
								>
									<template #default="scope">
										<p v-if="!column.model">
											{{scope.row[
												column.relationField.split("_table_")[0] +
												"_" +
												column.showField
											]}}
										</p>
										<p v-else>
											{{scope.row[column.model]}}
										</p>
									</template>
								</TableColumn>
								<TableColumn
									v-else-if="column.config.identity === 'uploadFz'"
									:key="columnIndex"
									:label="column.config.label"
									:prop="column.model"
									min-width="250px"
								>
									<template #default="scope">
										<mc-upload-file
											v-model="scope.row[column.model]"
											detailed
											disabled
										/>
									</template>
								</TableColumn>
								<TableColumn
									v-else-if="
										column.config.identity === 'calculate' &&
											column.config.isStorage === 1
									"
									:key="columnIndex"
									:label="column.config.label"
									:prop="column.model"
								>
									<template #default="scope">
										<McCalculate
											:row-index="scope.$index"
											:expression="column.expression"
											:is-storage="1"
											:form-data="formValue"
											:is-amount-chinese="column.isAmountChinese"
											:thousands="column.thousands"
											:precision="column.precision"
											:detailed="true"
										/>
									</template>
								</TableColumn>
								<TableColumn
									v-else-if="column.config.identity === 'uploadImg'"
									:key="columnIndex"
									:label="column.config.label"
									:prop="column.model"
								>
									<template #default="scope">
										<mc-upload-img
											v-model="scope.row[column.model]"
											detailed
											disabled
										/>
									</template>
								</TableColumn>
								<TableColumn
									v-else-if="column.config.identity === 'numInput'"
									:key="columnIndex"
									:label="column.config.label"
									:prop="column.model"
								>
									<template #default="scope">
										<McNumber
											v-model="scope.row[column.model]"
											:thousands="column.thousands"
											:is-amount-chinese="column.isAmountChinese"
											:addon-before="column.addonBefore"
											:addon-after="column.addonAfter"
											:precision="column.precision"
										/>
									</template>
								</TableColumn>
								<TableColumn
									v-else
									:key="columnIndex"
									:prop="column.model"
									:label="column.config.label"
								>
									<template #header>
										<span
											v-if="column.config.tipLabel && column.config.label"
											slot="label"
										>{{column.config["label"]}}
											<Tooltip
												placement="top"
												:content="column.config.tipLabel"
											>
												<a
													class="el-icon-question m-view-tooltip-question"
												/>
											</Tooltip>
										</span>
										<span v-else>{{column.config["label"]}}</span>
									</template>
									<template #default="scope">
										<span v-if="column.customSlot && column.scustomSlotlot.prepend">{{column.customSlot.prepend}}</span>{{getThousandsValue(column, scope.row[column.model])}}<span v-if="column.customSlot && column.customSlot.append">{{column.customSlot.append}}</span>
										<div
											v-if="column.isAmountChinese"
											class="isAmountChinese m-view-detail-text"
										>
											<!-- {{amountChinese(scope.row[column.model])}} -->
										</div>
									</template>
								</TableColumn>
							</template>
						</template>
					</Table>
				</FormItem>
			</template>
			<template v-if="item.config.identity === 'tab'">
				<Tabs
					v-model="item.config.active"
					:type="item.type"
					:tab-position="item.tabPosition"
					class="mb-10px"
				>
					<TabPane
						v-for="(pane, i) in item.config.children"
						:key="i"
						:label="pane.title"
					>
						<Row>
							<Item
								v-for="(childItem, childIndex) in pane.config.children"
								:key="childIndex"
								:item="childItem"
								v-bind="$props"
								v-on="$listeners"
							/>
						</Row>
					</TabPane>
				</Tabs>
			</template>
			<template v-if="item.config.identity === 'collapse'">
				<Collapse
					v-model="item.config.active"
					:accordion="item.accordion"
					class="mb-20px"
				>
					<CollapseItem
						v-for="(pane, i) in item.config.children"
						:key="i"
						:title="pane.title"
						:name="pane.name"
					>
						<Row>
							<Item
								v-for="(childItem, childIndex) in pane.config.children"
								:key="childIndex"
								:item="childItem"
								v-bind="$props"
								v-on="$listeners"
							/>
						</Row>
					</CollapseItem>
				</Collapse>
			</template>
			<template v-if="item.config.identity === 'tableGrid'">
				<table
					class="m-view-table-grid-box"
					:style="{
						'--borderType': item.config.borderType,
						'--borderColor': item.config.borderColor,
						'--borderWidth': item.config.borderWidth + 'px',
					}"
				>
					<tbody>
						<tr
							v-for="(child, index) in item.config.children"
							:key="index"
						>
							<td
								v-for="(it, i) in child.config.children"
								v-show="!it.config.merged"
								:key="i"
								:colspan="it.config.colspan"
								:rowspan="it.config.rowspan"
							>
								<Item
									v-for="(childItem, childIndex) in it.config.children"
									:key="childIndex"
									:item="childItem"
									v-bind="$props"
									v-on="$listeners"
								/>
							</td>
						</tr>
					</tbody>
				</table>
			</template>
			<template v-if="item.config.identity === 'flex'">
				<Col :span="item.config.span">
					<Row
						:gutter="item.config.gutter"
						:class="{ 'drawing-item': item.config.border }"
					>
						<span>{{item.config.displayName}}</span>
						<div :style="item.flex">
							<Item
								v-for="(childItem, childIndex) in item.config.children"
								:key="childIndex"
								:item="childItem"
								v-bind="$props"
								v-on="$listeners"
							/>
						</div>
					</Row>
				</Col>
			</template>
		</template>
	</Col>
</template>
<script>
// import {getDownloadUrl} from '@/api/common';
// import {getAmountChinese, thousandsFormat} from '@/components/Generator/utils/index.js';
//TODO 待引入mc组件
import {Col, Divider, Alert, Image, ColorPicker, Rate, Card, Tooltip, Row, Table, TableColumn, Link, Tabs, TabPane, Collapse, CollapseItem} from 'element-ui';
import McUploadFile from '../../upload-file/index.vue';
import McBarcode from '../../barcode/index.vue';
import McQrcode from '../../qrcode/index.vue';
import McCalculate from '../../calculate/index.vue';
import McButton from '../../button';
import McLink from '../../link';
import McText from '../../text';
export default {
	name:'RelationFormItem',
	components:{
		McCalculate,
		McQrcode,
		McBarcode,
		McUploadFile,
		McButton,
		McLink,
		McText,
		Col,
		Divider,
		Alert,
		CustomImage:Image,
		ColorPicker,
		Rate, Card,
		Tooltip,
		Row,
		Table,
		TableColumn,
		Link,
		Tabs,
		TabPane,
		Collapse,
		CollapseItem,
	},
	props:{
		item:{
			type:Object,
			required:true,
		},
		data:{
			type:Object,
			required:true,
		},
		formValue:{
			type:Object,
		},
		relationData:{
			type:Object,
			default: () => {},
		},
	},
	methods:{
		toDetail(item){
			this.$emit('to-detail', item);
		},
		toTableDetail(item, value){
			item.config.defaultValue = value;
			this.$emit('to-detail', item);
		},
		downloadFile(file){
			if(!file.fileId) return;
      // getDownloadUrl('annex', file.fileId).then((res) => {
      // 	this.$commonUtils.downloadFile(res.data.url, file.name);
      // });
		},
		getImgList(list){
			const newList = list.map((o) => this.$pathConfig.comUrl + o.url);
			return newList;
		},
		getValue(item){
			if(Array.isArray(item.config.defaultValue)){
				if(['timeRange', 'dateRange'].includes(item.config.identity)){
					return item.config.defaultValue.join('');
				}
				return item.config.defaultValue.join();
			}
      // if(item.thousands) return thousandsFormat(item.config.defaultValue);
			return item.config.defaultValue;
		},
		amountChinese(val){
			val;
      // return getAmountChinese(val);
		},
		getThousandsValue(item, val){
      // if(item.thousands) return thousandsFormat(val);
			return val;
		},
		getSummaries(param){
			const summaryField = this.item.summaryField;
			const thousandsField = [];
			this.item.config.children.forEach((res) => {
				if(res.thousands) thousandsField.push(res.model);
			});
			const {columns, data} = param;
			const sums = [];
			columns.forEach((column, index) => {
				if(index === 0){
					sums[index] = '合计';
					return;
				}
				if(!summaryField.includes(column.property)){
					sums[index] = '';
					return;
				}
				const values = data.map((item) => Number(item[column.property]));
				if(!values.every((value) => isNaN(value))){
					sums[index] = values
						.reduce((prev, curr) => {
							const value = Number(curr);
							if(!isNaN(value)){
								return prev + curr;
							}else{
								return prev;
							}
						}, 0)
						.toFixed(2);
					if(thousandsField.includes(column.property)){
            // sums[index] = thousandsFormat(sums[index]);
					}
				}else{
					sums[index] = '';
				}
			});
			return sums;
		},
	},
};
</script>